<template>

  <!-- 线索的录入和编辑共用此页面 -->

  <!-- :model="clueQuery"   表单绑定的数据 -->
  <!-- label-width="110px"  表单整体距离左侧的宽度 -->
  <!-- :rules="clueRoles"   绑定验证规则 -->
  <!-- ref="clueRefForm"    表单提交之前验证表单的验证规则 -->
  <el-form :model="clueQuery" label-width="110px" :rules="clueRules" ref="clueRefForm">

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <div class="owner">&nbsp; {{ this.ownerName }}</div>
    </el-form-item>

    <!-- 所属活动 -->
    <!-- 市场活动的名字会有重复，所以在后端返回数据时将名称都加上了id，这里展示市场活动的是：名称-id -->
    <el-form-item label="所属活动">
      <el-select v-model="clueQuery.activityId" placeholder="请选择所属活动">
        <el-option
            v-for="activity in this.options.activity"
            :key="activity.id"
            :label="activity.name"
            :value="activity.id"/>
      </el-select>
    </el-form-item>

    <!-- 姓名 -->
    <el-form-item label="姓名" prop="fullName">
      <el-input v-model.trim="clueQuery.fullName" />
    </el-form-item>

    <!-- 称呼 -->
    <el-form-item label="称呼">
      <el-select v-model="clueQuery.appellation" placeholder="请选择称呼">
        <el-option
            v-for="appellation in this.options.appellation"
            :key="appellation.id"
            :label="appellation.typeValue"
            :value="appellation.id"/>
      </el-select>
    </el-form-item>

    <!-- 手机 -->
    <el-form-item label="手机" prop="phone">
      <!-- 编辑的时候，手机号是不能更改的，同时也不验证手机号（编辑操作查询了线索信息，所以id一定是大于0的） -->
      <el-input v-model.trim="clueQuery.phone" :disabled="this.clueQuery.id > 0"/>
    </el-form-item>

    <!-- 微信 -->
    <el-form-item label="微信" prop="weixin">
      <el-input v-model.trim="clueQuery.weixin" />
    </el-form-item>

    <!-- qq -->
    <el-form-item label="qq" prop="qq">
      <el-input v-model.trim="clueQuery.qq" />
    </el-form-item>

    <!-- 邮箱 -->
    <el-form-item label="邮箱" prop="email">
      <el-input v-model.trim="clueQuery.email" />
    </el-form-item>

    <!-- 年龄 -->
    <el-form-item label="年龄" prop="age">
      <el-input v-model.trim="clueQuery.age" />
    </el-form-item>

    <!-- 职业 -->
    <el-form-item label="职业">
      <el-input v-model.trim="clueQuery.job" />
    </el-form-item>

    <!-- 年收入 -->
    <el-form-item label="年收入" prop="yearIncome">
      <el-input v-model.trim="clueQuery.yearIncome" />
    </el-form-item>

    <!-- 住址 -->
    <el-form-item label="住址">
      <el-input v-model.trim="clueQuery.address" />
    </el-form-item>

    <!-- 贷款 -->
    <el-form-item label="贷款">
      <el-select v-model="clueQuery.needLoan" placeholder="请选择是否需要贷款">
        <el-option
            v-for="needLoan in this.options.needLoan"
            :key="needLoan.id"
            :label="needLoan.typeValue"
            :value="needLoan.id"/>
      </el-select>
    </el-form-item>

    <!-- 意向状态 -->
    <el-form-item label="意向状态">
      <el-select v-model="clueQuery.intentionState" placeholder="请选择意向状态">
        <el-option
            v-for="intentionState in this.options.intentionState"
            :key="intentionState.id"
            :label="intentionState.typeValue"
            :value="intentionState.id"/>
      </el-select>
    </el-form-item>

    <!-- 意向产品 -->
    <el-form-item label="意向产品">
      <el-select v-model="clueQuery.intentionProduct" placeholder="请选择意向产品">
        <el-option
            v-for="intentionProduct in this.options.intentionProduct"
            :key="intentionProduct.id"
            :label="intentionProduct.name"
            :value="intentionProduct.id"/>
      </el-select>
    </el-form-item>

    <!-- 线索状态 -->
    <el-form-item label="线索状态">
      <el-select v-model="clueQuery.state" placeholder="请选择线索状态">
        <el-option
            v-for="state in this.options.clueState"
            :key="state.id"
            :label="state.typeValue"
            :value="state.id"/>
      </el-select>
    </el-form-item>

    <!-- 线索来源 -->
    <el-form-item label="线索来源">
      <el-select v-model="clueQuery.source" placeholder="请选择线索来源">
        <el-option
            v-for="source in this.options.source"
            :key="source.id"
            :label="source.typeValue"
            :value="source.id"/>
      </el-select>
    </el-form-item>

    <!-- 线索描述 -->
    <el-form-item label="线索描述" prop="description" placeholder="请输入线索描述">
      <el-input v-model.trim="clueQuery.description"
                type="textarea"
                :rows="6"
                placeholder="请输入线索描述"/>
    </el-form-item>

    <!-- 下次联系时间 -->
    <el-form-item label="下次联系时间">
      <!-- type="datetime"  日期选择器的类型（样式） -->
      <!-- value-format     绑定值的格式，向后端提交的格式 -->
      <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
      <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
      <el-date-picker
          v-model="clueQuery.nextContactTime"
          type="datetime"
          placeholder="请选择下次联系时间"
          :disabled-date="disabledDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
          style="width: 100%;"/>
    </el-form-item>

    <el-form-item>
      <!-- 根据用户不同的操作调用不同的执行方法 -->
      <!-- 如果当前线索的id值大于0，则表明是编辑，否则就是录入，因为编辑的时候查询了线索信息，所以id值一定大于0 -->
      <el-button type="primary" @click="this.clueQuery.id > 0 ? editClue() : addClue()">提交</el-button>
      <el-button @click="goBack()">返回</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import {doGet, doPost, doPut} from "../http/httpRequest.js";
  import {messageTip} from "../util/util.js";

  export default {
    name: "ClueRecordView",

    data() {
      return {
        // 线索对象
        clueQuery: { },

        // 负责人名字
        ownerName: "",

        // 下拉列表选项对象（注意：是对象而不是数组，因为后端返回的是Map集合，key就是该对象内的属性名，value就是属性值，属性值可以是一个对象，也可以是一个数组/集合）
        options: { },

        // 线索表单的验证规则
        clueRules: {
          // 只有手机号是必须输入的，其他表单内容是非必须的，只需要验证格式是否正确即可
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' },
            // validator：方法验证，绑定一个函数
            // 注意：函数不要加括号，element-plus框架会自动传入三个参数：rule规则、value值、callback回调
            { validator: this.checkPhone, trigger: 'blur' }
          ],
          fullName : [
            { min: 2, message: '姓名至少2个汉字', trigger: 'blur'},
            { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须为中文', trigger: 'blur'}
          ],
          weixin: [
            // 微信正则验证
            { pattern: /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/, message: '可使用6-20个字母、数字、下划线和减号，必须以字母开头（不区分大小写）', trigger: 'blur'}
          ],
          qq : [
            { min: 5, message: 'QQ号至少为5位数字', trigger: 'blur'},
            { pattern: /^\d+$/, message: 'QQ号码必须为数字', trigger: 'blur'}
          ],
          email: [
            { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'},
          ],
          age: [
            { pattern: /^[1-9]\d*$/, message: '年龄必须为大于0的整数', trigger: 'blur'}
          ],
          yearIncome: [
            { pattern: /^[0-9]+(\.[0-9]{2})?$/, message: '年收入必须是整数或者两位小数', trigger: 'blur'}
          ],
          description: [
            { min: 5, max: 255, message: '线索描述长度为5-255个字符', trigger: 'blur'}
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动调用
    mounted() {
      // 页面渲染完成后，加载下拉选项数据
      this.loadClueOptions();

      // 录入和编辑共用此页面，如果是编辑线索，则加载线索信息
      this.loadClueQuery();
    },

    methods: {
      // 加载下拉选项数据
      loadClueOptions() {
        // 向后端发送请求
        doGet("/api/clue/loadOptions", { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据（Map集合）赋值给下拉列表选项对象
            this.options = resp.data.data;
            // 获取负责人的id
            this.clueQuery.ownerId = resp.data.data.owner.id;
            // 获取负责人的名字，回显到表单中
            this.ownerName = resp.data.data.owner.name;
          } else {
            messageTip("下拉选项加载失败", "error");
          }
        })
      },

      // 验证手机号有没有录入过（是否重复），录入过的手机号不能再录入，避免两个人录入同一个客户线索
      checkPhone(rule, value, callback) {
        // 录入操作需要验证手机号是否已经录入过，编辑操作不需要验证
        // 判断当前是录入操作还是编辑操作，路由路径上没有id参数则是录入操作，需要验证
        if (!this.$route.params.id) {

          // 验证手机号是否录入过，录入过就不能再录入了
          let phone = value;
          if (phone) {
            // 向后端发送请求
            doGet("/api/clue/checkPhone/" + phone, { }).then( (resp) => {
              if (resp.data.code === 200) {
                // 手机号没有录入过，验证通过
                return callback();
              } else {
                // 手机号录入过，不能再次录入
                return callback(new Error("该手机号已经录入，不能再次录入"));
              }
            })
          }
        } else {
          // 编辑操作不需要验证，直接通过
          return callback();
        }
      },

      // el-date-picker禁用指定日期之前或之后的日期
      disabledDate(time) {
        // Date.now()获取当前时间（表示自 UNIX 纪元开始（1970 年 1 月 1 日 00:00:00 (UTC)）到当前时间的毫秒数）
        // - 8.64e7 表示可选择当天时间（注：小于当前时间，- 8.64e7 则是禁用日期不包含当前日，若大于当前日期， - 8.64e7 则是禁用日期包含当前日）

        // 今天之前的日期禁止选择（今天可选）
        return time.getTime() < Date.now() - 8.64e7;

        // 今天之前的日期禁止选择（今天不可选）
        // return time.getTime() < Date.now();

        // 不能选择今日之后的日期（今天可选）
        // return time.getTime() > Date.now();

        // 不能选择今日之后的日期（今天不可选）
        // return time.getTime() > Date.now() - 8.64e7;

        // 禁用指定日期，如禁用大于指定日期（当天不可选）
        // return time.getTime() > this.specifyDate - 8.64e7;
      },

      // 提交按钮（录入）
      addClue() {
        // 验证表单规则
        this.$refs.clueRefForm.validate( (isValid) => {
          // 判断是否验证通过
          if (isValid) {

            // 使用FormData对象传递数据
            let formData = new FormData();
            // 遍历表单对象，给FormData对象添加参数
            for (let field in this.clueQuery) {
              // 空参数没有意义，排除空参数，同时可以避免后端空指针
              if (this.clueQuery[field]) {
                formData.append(field, this.clueQuery[field]);
              }
            }

            // 向后端发送请求
            doPost("/api/clue/add", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("录入成功", "success");
                // 返回上一级
                this.$router.go(-1);
              } else {
                messageTip("录入失败", "error");
              }
            })
          }
        })
      },

      // 加载线索信息（编辑操作）
      loadClueQuery() {
        // 判断此次操作是录入还是编辑，如果路由地址上由id参数，则是编辑（需要加载线索信息），否则就是录入（不需要加载线索信息）
        let id = this.$route.params.id;
        if (id) {
          // 向后端发送请求
          doGet("/api/clue/get/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              this.clueQuery = resp.data.data;
            } else {
              messageTip("线索信息获取失败", "error");
            }
          })
        }
      },

      // 提交按钮（编辑）
      editClue() {
        // 验证表单规则
        this.$refs.clueRefForm.validate( (isValid) => {
          // 判断是否验证通过
          if (isValid) {

            // 使用FormData对象传递数据
            let formData = new FormData();
            // 遍历表单对象，给FormData对象添加参数
            for (let field in this.clueQuery) {
              // 空参数没有意义，排除空参数，同时可以避免后端空指针
              if (this.clueQuery[field]) {
                formData.append(field, this.clueQuery[field]);
              }
            }

            // 向后端发送请求
            doPut("/api/clue/edit", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 返回上一级
                this.$router.go(-1);
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 返回按钮
      goBack() {
        // 返回上一级路由
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>

  /* 负责人 */
  .owner {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

</style>

